define('FruitSelection',function(){
var React = require("react");
var ReactDOM = require("react-dom");
var _FruitSelection = React.createClass ({
    inputDelay:null,    //指示是否有一个延迟timer启动，延迟过后向服务发起请求，减少用户快速输入时，服务器负担
    xhr:null,           //记录已发起的请求，如果请求没结束，放弃之
    getDefaultProps:function(){
        input:null
    },
    getValue:function(){    //返回输入的果品
        if(this.state.selectedFruit == null){
            return {//手工输入的果品，没有Code
                name:this.refs.inputedFruit.value,
                code:null
            }
        }
        return this.state.selectedFruit;
    },
    getInitialState:function(){
            return {
                selectedFruit:null,
                hidden:true,
                candidateFruits:[]
            };
    },
    componentDidMount:function(){
    },
    handleLeaveInput:function(e){
      var myself = this;
      setTimeout(function(){
                    myself.setState({candidateFruits:[],hidden:true});
                },300);
    },
    handleFocus:function(e){
        this.setState({candidateFruits:[],hidden:false});
    },
    handleFruitInput:function(e){
        if(this.inputDelay != null) clearTimeout(this.inputDelay);
        var value = e.target.value;
        var myself = this;
        if(this.state.selectedFruit != null && e.target.value != this.state.selectedFruit.name){//刚选择的内容被更改了
            this.state.selectedFruit = null;//不应该这样操作，但从当前情况看，没有必要重新刷新，这样也有意义，为了语义的完整性
        }
        this.inputDelay = setTimeout(function(){
                        myself.proposeFruit(value);
                    },200);
    },
    proposeFruit:function(val){
        var jsonp_url = "http://203.195.176.188:9002/pgsearch/pgsearch.php?data=md_goods&format=json&str=*";
        var myself = this;
        if(val.length > 1){
            if(this.xhr != null && this.xhr.readyState != 4) this.xhr.abort();
                this.xhr = $.getJSON(jsonp_url + val + "*&callback=?",null,
                    function(data){
                        myself.setState({candidateFruits:data,selectedFruit:null,hidden:false});
                    }
                ).fail(function(){
                    if(this.state.candidateFruits != null || this.state.selectedFruit != null ){
                        myself.setState({candidateFruits:null,selectedFruit:null,hidden:false});
                    }
                });
            return true;
        }else{
            this.setState({candidateFruits:[],hidden:false});
        }
        return false;
    },
    handleTipsClick(e){
        this.setState({
            selectedFruit:{
                    name:e.target.textContent,
                    code:e.target.id
                },
            candidateFruits:[]
        });
    },
    render:function(){
        var inputWrap = <input onChange={this.handleFruitInput} onFocus={this.handleFocus} onBlur={this.handleLeaveInput} ref='inputedFruit'></input>;
        var tipsDiv = {
            position:'absolute',
            background:'lightgreen',
            fontSize:'medium',
            display:this.state.hidden ? 'none':'block',
            zIndex:9999
        }
        var tips = [];
        {
            if(this.state.selectedFruit != null){
              inputWrap = <input onChange={this.handleFruitInput} onBlur={this.handleLeaveInput} value={this.state.selectedFruit.name} ref='inputedFruit'></input>;
            }
        }
        if(this.state.candidateFruits != null && this.state.candidateFruits.length != 0){
            var items = [];
            $.each(this.state.candidateFruits,function(idx,item){
                items.push(<li id={item.code}>{item.name}</li>);
                });
            tips = <ul>{items}</ul>
        }else{
            tips = <div>
                    <div>瓜果类</div>
                    <label>西瓜</label>
                    <label>哈密瓜</label>
                    <label>甜瓜</label>
                    <label>香瓜</label>
                    <div>热带水果</div>
                    <label>香蕉</label>
                    <label>榴莲</label>
                    <label>火龙果</label>
                   </div>

        }
        return (<div>{inputWrap}
                <div className='tips' style={tipsDiv} onClick={this.handleTipsClick}>
                    {tips}
                </div></div>
        );
    }
});

return _FruitSelection;
});
